@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--color-primary: 14 80% 60%;

		--color-shade-0: 0 0% 100%;
		--color-shade-1: 0 0% 96%;
		--color-shade-2: 0 0% 92%;
		--color-shade-3: 0 0% 88%;
		--color-shade-4: 0 0% 84%;
		--color-shade-5: 0 0% 80%;
		--color-shade-6: 0 0% 76%;

		--color-text-shade-0: 0 0% 5%;
		--color-text-shade-1: 0 0% 25%;
		--color-text-shade-2: 0 0% 50%;

		--color-negative: 0 100% 50%;
		--color-negative-muted: 0 100% 95%;

		--color-warning: 33 95% 44%;
		--color-warning-muted: 36 100% 95%;

		--color-positive: 161 94% 30%;
		--color-positive-muted: 133 100% 95%;
	}

	[data-color-theme='dark'] {
		--color-primary: 14 80% 60%;

		--color-shade-0: 0 0% 10%;
		--color-shade-1: 0 0% 14%;
		--color-shade-2: 0 0% 18%;
		--color-shade-3: 0 0% 22%;
		--color-shade-4: 0 0% 26%;
		--color-shade-5: 0 0% 30%;
		--color-shade-6: 0 0% 34%;

		--color-text-shade-0: 0 0% 95%;
		--color-text-shade-1: 0 0% 85%;
		--color-text-shade-2: 0 0% 50%;

		--color-negative: 0 100% 50%;
		--color-negative-muted: 0 100% 10%;

		--color-warning: 33 95% 44%;
		--color-warning-muted: 30 100% 10%;

		--color-positive: 161 94% 30%;
		--color-positive-muted: 120 100% 10%;
	}
}
